
<template>
    <div class="login-container">
      <div class="login-box">
        <h2 class="title">宠物管理系统登录</h2>
        <el-form 
          :model="loginForm" 
          :rules="rules" 
          ref="loginForm" 
          @submit.native.prevent="handleLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              native-type="submit"
              :loading="loading"
              class="login-btn"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'LoginPage',
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        },
        loading: false
      }
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            // 模拟登录请求
            setTimeout(() => {
              this.$store.commit('SET_USER', {
                username: this.loginForm.username,
                role: 'admin'
              })
              this.$router.push('/HomePage')
              this.loading = false
            }, 1000)
          }
        })
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f2f5;
  
    .login-box {
      width: 400px;
      padding: 40px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  
      .title {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
      }
  
      .login-btn {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
  </style>